<template>
	<div class="gk-layout-container">
		<div class="gk-layout-header">
			<!--工具栏-->
		<s-query perms="sys:file"  addPerms="sys:file" @click="findPage"  add="true"   @addClick="handleAdd" > 
			<s-dict name="wjlx" v-model="filters.wjlx" />
			<s-dict name="sblx" v-model="filters.sblx" />
			<s-dict name="cx" v-model="filters.cx" />
					
		</s-query>
		
		</div>
		<!--表格内容栏-->

		<div class="gk-layout-main">
			<my-table :data="pageResult.content"  :loading="loading"  :cell-style="myclass"  >
				<el-table-column :label="$t('action.desc')" width="50" header-align="center" align="center">
					<template slot-scope="scope"> {{scope.$index+1}} </template>
				</el-table-column>
				<column prop="name" label="名称"    /> 
				<column prop="path" label="位置"   width="300px" /> 
				<column prop="type" label="设备类型"  :formatter= "sblxFormat"  />
				<column prop="type" label="线别"  :formatter= "xbFormat"/>
				<column prop="wjlx" label="文件类型"  :formatter= "wjlxFormat"/>
				<el-table-column header-align="center" align="center" width="200" :label="$t('action.operation')">
					<template slot-scope="scope">
					    <kt-button    perms="sys:file:delete"   @click="dowmload( scope.row.id)" />
				
						<kt-delete-button   perms="sys:file:delete"    @click="handlefinsh(scope.$index, scope.row)" />
					</template>
				</el-table-column>
			</my-table>
		</div>
		<!--分页栏-->
		<div class="toolbar gk-layout-footer" style="padding:10px;">
			<el-pagination layout="total, prev, pager, next, jumper" @current-change="findPage"
				:current-page="filters.pageNum" :page-size="filters.pageSize" :total="pageResult.totalSize"
				style="float:right;">
			</el-pagination>
		</div>


<el-dialog title="附件"   width="500px"  :visible.sync="dialogVisible"  :close-on-click-modal="true">
      <el-form :model="dataForm"  label-width="120px" ref="dataForm"  :rules="dataFormRules"  size="mini"   label-position="right">
	       	       	<s-dict-form name="wjlx" v-model="dataForm.wjlx" />
					<s-dict-form name="sblx" v-model="dataForm.equipmentType" />
				    <s-dict-form name="cx" v-model="dataForm.line" /> 
					<el-form-item label="文件"  prop="path"> 
							<el-upload class="upload-demo"
									:action=fileUrl 
									:file-list="fileList"         
									:limit="1"  
									:on-progress="handleProgress"
									:on-remove="handleRemove"  
									:on-preview="handlePreview"   
									:on-success="handleSuccess">
									<el-button size="small" type="primary">其他文件上传</el-button> 
								</el-upload>
					</el-form-item>

		  
					<el-form-item label="上传进度"  prop="path"> 
						<el-progress :percentage="percentage"></el-progress>
					</el-form-item>
      </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button :size="global.gSize" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button :size="global.gSize" type="primary"   @click.native="submitForm">{{$t('action.submit')}}</el-button>
      </div>
			
    </el-dialog>
</div>

</template>

<script> 
	import KtButton from "@/views/Core/KtButton"
	import MyTable from "@/views/Core/MyTable"
	import Column from "@/views/Core/Column"
	import { format2 } from "@/utils/datetime"
	import {  dictsFormat } from "@/utils/myUtil"
	import { my2sj } from "@/utils/myUtil"
	import SDict from "@/components/Kj/SDict"
    import SDictForm from "@/components/Kj/SDictForm"
   import SQuery from "@/components/Kj/SQuery" 
	import KtDeleteButton from "@/views/Core/KtDeleteButton"
	   
	export default {
		components: {
			KtButton,
			Column,KtDeleteButton,SDictForm,
			MyTable,SQuery,SDict
		},
		data() {
			   let vNumber3 =  (rule, value, callback) =>{
					const age= /^[0-9]*$/
					if (!age.test(value)) {
						callback(new Error('只能为数字'))
					}else{
						callback()
					}
				}
			return {
				size:"mini",
				filters: {
					tableName: 'm_equipment',pageNum: 1, pageSize: this.global.pageSize
				},      
				fileList:[],
				operation:true,
				fileUrl:'',
				loading: false, 
				dialogVisible:false, 
			 
				pageResult: {}, 
		   		
				dataForm: {
					id: 0,
					typeBase:"equp"
				}, 
				
				percentage:0,
				dataFormRules:{
					equipmentType: [{ required: true, message: "请选择设备类型", trigger: 'blur' }],
					path: [{ required: true, message: "请选择文件", trigger: 'blur' }]
				}
			}
		},
		computed: {
			
		},
		methods: {
			handleProgress (event, file, fileList) {
				this.percentage= event.percent;
			},
			handlePreview(file) {
				
				var a = document.createElement('a');
				var event = new MouseEvent('click');
				a.download = file.name;
				a.href = file.url;
				a.dispatchEvent(event); 
			},
       
			dowmload(id) {
				
				var a = document.createElement('a');
				var event = new MouseEvent('click');
				
				a.href = this.global.baseUrl+"/api/file/download/"+id;
				a.dispatchEvent(event); 
				},
				
      
          
        //上传成功
        handleSuccess(res, file, fileList){ 
			 
            let fileSize=res.data.fileSize/1024/1024
            this.dataForm.name= file.name,
            this.dataForm.fileSize=fileSize,
			this.dataForm.path= res.data[0];
           
        },     
        handleRemove(file, fileList){
            this.dataForm.name= ""
            this.dataForm.fileSize=0
			this.dataForm.path= ""
        },
			
       
			// 获取分页数据
			findPage: function (data) {
				if(data!=-1){
					this.filters.pageNum=data	
				}
				 
				this.$api.exports.page(this.filters).then((res) => {
					this.pageResult = res.data
				}).then(data != null ? data.callback : '')
			},

		
			 submitForm: function () {
				
				this.$refs.dataForm.validate((valid) => {
				if (valid) {
					this.$confirm(this.$t('action.isConfirm'), this.$t('action.tips'), {}).then(() => {
							this.editLoading = true
							let params = Object.assign({}, this.dataForm); 
							params.type=	params.typeBase+params.equipmentType+(params.line||"");
							this.$api.exports.fileSave(params).then((res) => {
								this.editLoading = false
								if (res.code == 200) {
									var info = res.data!=true?res.data: this.$t('action.operateSucess')
									this.$message({ message:info, type: 'success' })
									this.dialogVisible = false
									this.$refs['dataForm'].resetFields()
								} else {
									this.$message({ message: this.$t('action.operateFail') + res.msg, type: 'error' })
								}
								this.findPage(-1)
							})
					})
				}
				})
			},
			  handleAdd: function () {

				this.dialogVisible = true
				this.operation = true
				this.dataForm = {typeBase:"equp"}
			
			},
			 
			Format2Time: function (row, column, cellValue, index) {
				return cellValue;
      		},

			sblxFormat: function (row, column, cellValue, index) {
				
				return	dictsFormat( "sblx",cellValue.substr(4,1))
			  },
			  
			  wjlxFormat:function (row, column, cellValue, index) {
				
				return	dictsFormat( "wjlx",cellValue)
			  },
			 xbFormat: function (row, column, cellValue, index) {
				
				return	dictsFormat( "cx",cellValue.substr(5))
      		},
			 
			myclass:function(row){ 
				if(row.row.progress==3){
					return "color:red ;font-weight:bold"
				}else{
					return "color:blue"
				}
			},

	 
			
		

			handlefinsh: function (params, row) {
	
			
				var param= Object.assign({}, row)
		 
				this.$api.exports.deleteFile(param).then((res) => {
						this.editLoading = false
						if (res.code == 200) {
							var info = res.data!=true?res.data: this.$t('action.operateSucess')
							this.$message({ message:info, type: 'success' })
					
					
						} else {
							this.$message({ message: this.$t('action.operateFail') + res.msg, type: 'error' })
						}
						this.findPage(-1)
					})
					
			},
			// 时间格式化
			dateFormat: function (row, column, cellValue, index) {
				return format(row[column.property])
			}
			
			
		},
		
		mounted() {
		    this.$api.mes.equpAll().then((res) => {
					this.equpAlls = res.data
			})
		 
			this.size=this.global.gSize;
			this.findPage(1);
			 this.fileUrl=this.global.baseUrl+"/api/file/upload";
		}
	}
</script>

<style lang="scss" scoped>

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>